<template>
	<view>
		<view class="user-page">
			<view class="user-header">
				<view class="user-msg">
					<view class="rights-msg" @click="$Router.push('/pages/article/index')">
						<image src="/static/imgs/user/msg.png" />
					</view>
				</view>
				<view class="userBox">
					<view class="user_info">
						<view class="user-left">
							<image src="/static/imgs/user/touxiang.png" />
						</view>
						<view class="user-right">
							<view class="userCont">
								<view class="name">{{ $store.getters.userInfo.user.loginName }}({{$store.getters.userInfo.user.userId}})</view>
								<view class="types">
									<view>
										<text v-if="$store.getters.userInfo.user.level == 0">{{ $t('user.u0') }}</text>
										<text v-else>VIP {{ $store.getters.userInfo.user.level }}</text>
									</view>
									<view>
										<text v-if="$store.getters.userInfo.detail.auditStatusPrimary == 1">{{ $t('user.u1') }}</text>
										<text v-else>{{ $t('user.u2') }}</text>
									</view>
								</view>
							</view>
							<!-- <view class="sinbtn">
                <image src="/static/imgs/user/fudai.png" />
                <view>每日签到</view>
              </view> -->
						</view>
					</view>
					<view class="wate-info">
						<view class="item">
							<view class="item-left">
								<view>{{ $t('user.u3') }}(USDT)</view>
								<view>{{ $store.getters.userInfo.user.balance }}</view>
							</view>
							<view class="item-right">
								<image src="/static/imgs/user/wate.png" />
							</view>
						</view>
						<!-- 	<view class="item">
							<view class="item-left">
								<view>USDT</view>
								<view>{{$store.getters.userInfo.user.balance}}</view>
							</view>
							<view class="item-right">
								<image src="/static/imgs/user/wate.png" />
							</view>
						</view> -->
					</view>
				</view>
				<view class="my-related">
					<view class="labels">{{ $t('user.u4') }}</view>
					<view class="row-item">
						<!-- 	<view class="item" @click="$Router.push('/subPackages/userMenu/incomeDetail')">
							<image src="/static/imgs/user/sy.jpg" />
							<view>我的收益</view>
						</view> -->
						<view class="item" @click="$Router.push('/subPackages/userMenu/deposit')">
							<image src="/static/imgs/user/cz.jpg" />
							<view>{{ $t('home.h2') }}</view>
						</view>
						<view class="item" @click="$Router.push('/subPackages/userMenu/withdraw')">
							<image src="/static/imgs/user/tx.jpg" />
							<view>{{ $t('home.h3') }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="user-conter">
				<view class="my-menu">
					<view class="row-item">
						<view class="item" v-for="(item, index) in menuList" :key="index" @click="goPage(item)">
							<image :src="'/static/imgs/user/' + item.img + '.png'" />
							<view>{{ item.name }}</view>
						</view>
					</view>
				</view>

				<view class="other-menu">
					<view class="labels">{{ $t('user.u5') }}</view>
					<view class="item" v-for="(item, index) in otherMenuList" :key="index" @click="toPage(item)">
						<image :src="'/static/imgs/user/' + item.img + '.png'" />
						<view>{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>

		<FooterNav :modelKey="5" />
	</view>
</template>
<script>
import store from '@/store';
import { getUserInfo } from '@/api/index.js';
export default {
	components: {},
	props: {},
	data() {
		return {
			menuList: [
				{
					name: this.$t('home.h13'),
					img: 'cwmenu',
					path: '/subPackages/userGrid/moneyDetail'
				},
				{
					name: this.$t('home.h10'),
					img: 'tdmenu',
					path: '/subPackages/userGrid/team'
				},

				{
					name: this.$t('home.h9'),
					img: 'smmenu',
					path: '/subPackages/userGrid/business'
				},
				// {
				//   name: "日利宝",
				//   img: "rlbmenu",
				//   path: "/subPackages/userGrid/rilibaoindex",
				// },
				// {
				//   name: "积分商城",
				//   img: "jfmenu",
				//   path: "",
				// },
				{
					name: this.$t('home.h14'),
					img: 'tzmenu',
					path: '/subPackages/userGrid/myInvest'
				},
				{
					name: this.$t('subPackages.s2'),
					img: 'yhkmenu',
					path: '/subPackages/userGrid/bank'
				},

				{
					name: this.$t('home.h5'),
					img: 'yqmenu',
					path: '/subPackages/userGrid/team'
				}
			],

			otherMenuList: [
				{
					name: this.$t('home.h11'),
					img: 'icon0',
					type: 'path',
					path: '/subPackages/userOther/articleDetail'
				},
				{
					name: this.$t('subPackages.s115'),
					img: 'icon1',
					type: 'path',
					path: '/subPackages/userOther/withdrawalRecord'
				},
				// {
				//   name: "充值记录",
				//   img: "icon2",
				//   type: "path",
				//   path: "/subPackages/userOther/depositRecord",
				// },
				// {
				//   name: "兑换记录",
				//   img: "icon3",
				//   type: "path",
				//   path: "/subPackages/userOther/dhlistRecord",
				// },
				// {
				//   name: "互转记录",
				//   img: "icon4",
				//   type: "path",
				//   path: "/subPackages/userOther/huzhuanRecord",
				// },
				{
					name: this.$t('home.h1'),
					img: 'icon5',
					type: 'path',
					path: '/pages/language/language'
				},
				// {
				//   name: "资产互转",
				//   img: "icon6",
				//   type: "path",
				//   path: "/subPackages/userOther/assetTransfer",
				// },
				{
					name: this.$t('category.c37'),
					img: 'icon7',
					type: 'path',
					path: '/subPackages/userOther/payPass'
				},
				{
					name: this.$t('user.u6'),
					img: 'icon8',
					type: 'path',
					path: '/subPackages/userOther/loginPass'
				},
				{
					name: this.$t('user.u7'),
					img: 'icon9',
					type: 'outo',
					path: ''
				}
			]
		};
	},
	watch: {},
	computed: {},
	onShow() {
		this.init();
	},
	methods: {
		async init() {
			let res = await getUserInfo();
			console.log(res.data, 'resresres');
			// 更新 userInfo 并存储到本地
			this.$store.commit('USE_RINFO', res.data);
			// store.dispatch('getUserInfo',res.data)
		},
		toPage(v) {
			if (v.type == 'path') {
				if (v.path !== '') {
					this.$Router.push(v.path);
				}
			}
			if (v.type == 'outo') {
				this.$modal.confirm(this.$t('user.u8')).then(() => {
					this.$store.dispatch('LogOut');
					// #ifndef APP-PLUS
					window.location.reload();
					// #endif
				});
			}
		},
		goPage(v) {
			if (v.path !== '') {
				this.$Router.push(v.path);
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.user-page {
	position: absolute;
	width: 100%;
	background-image: url(/static/imgs/user/user_bank.png);
	background-repeat: no-repeat;
	background-size: 100% 380px;

	.user-header {
		padding: 0 30rpx;

		.user-msg {
			display: flex;
			justify-content: flex-end;
			padding: 25rpx 0;
			.rights-msg {
				width: 44rpx;
				height: 44rpx;
				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
		.userBox {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 24rpx;
			.user_info {
				display: flex;
				align-items: center;
				.user-left {
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						border: 3rpx solid rgb(234, 234, 234);
					}
				}
				.user-right {
					flex: 1;
					margin-left: 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.userCont {
						.name {
							font-weight: bold;
							font-size: 30rpx;
							color: rgb(51, 51, 51);
						}
						.types {
							margin-top: 10rpx;
							display: flex;
							view {
								background: rgba(209, 209, 209, 0.2);
								margin-right: 10rpx;
								border-radius: 24rpx;
								padding: 1px 8rpx;
								color: rgb(254, 152, 177);
								font-size: 20rpx;
								text-align: center;
							}
						}
					}
					.sinbtn {
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(rgb(255, 251, 230), rgb(255, 233, 167), rgb(255, 233, 167));
						color: rgb(253, 133, 53);

						border-radius: 20px;
						padding: 6rpx 12rpx;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 6rpx;
						}
						view {
							font-size: 22rpx;
							font-weight: bold;
						}
					}
				}
			}
			.wate-info {
				margin-top: 70rpx;
				display: grid;
				grid-template-columns: 45% 45%;
				justify-content: space-around;
				grid-column-gap: 30rpx;
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item-left {
						:nth-child(1) {
							font-size: 26rpx;
							color: rgb(0, 0, 0);
							margin-bottom: 8rpx;
						}
						:nth-child(2) {
							font-size: 26rpx;
							font-weight: bold;
							color: rgb(226, 19, 33);
						}
					}
					.item-right {
						image {
							width: 70rpx;
							height: 70rpx;
						}
					}
				}
			}
		}
		.my-related {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 24rpx;
			margin: 30rpx 0;
			.labels {
				font-size: 16px;
				color: #000;
				font-weight: 700;
				margin-bottom: 16px;
			}
			.row-item {
				display: grid;
				justify-content: space-between;
				grid-template-columns: 40% 40% 20%;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					image {
						width: 60rpx;
						height: 60rpx;
					}
					view {
						text-align: center;
						margin-top: 8px;
						font-size: 13px;
					}
				}
			}
		}
	}

	.user-conter {
		padding: 0 30rpx 120rpx;
		background: #f5f5f5;

		.my-menu {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 24rpx;
			.row-item {
				display: grid;
				justify-content: space-between;
				grid-template-columns: repeat(3, 1fr);
				gap: 10px;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					image {
						width: 60rpx;
						height: 60rpx;
					}
					view {
						text-align: center;
						margin-top: 8px;
						font-size: 13px;
					}
				}
			}
		}

		.other-menu {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 24rpx;
			margin: 30rpx 0;
			.labels {
				font-size: 16px;
				color: #000;
				font-weight: 700;
				margin-bottom: 16px;
			}

			.item {
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				image {
					width: 50rpx;
					height: 50rpx;
				}
				view {
					margin-left: 20rpx;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
